<template>
    <div class="snow-page">
      <div class="snow-inner">
        <!-- <a-form ref="formRef" auto-label-width :model="formData.form">
          <a-row :gutter="16">
            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
              <a-form-item field="vesselName" label="船名">
                <a-input v-model="formData.form.vesselName" placeholder="请输入"  allow-clear>
                </a-input>
              </a-form-item>
            </a-col>
              <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
              <a-form-item field="dischargePoint" label="卸点名称">
                <a-input v-model="formData.form.dischargePoint" placeholder="请输入"  allow-clear>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
              <a-form-item field="projectName" label="工程名称">
                <a-input v-model="formData.form.projectName" placeholder="请输入"  allow-clear>
                </a-input>
              </a-form-item>
              
            </a-col>
  
            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
              <a-space class="search-btn">
                <a-button type="primary" @click="getCommonTableList">
                  <template #icon>
                    <icon-search />
                  </template>
                  <template #default>查询</template>
                </a-button>
                <a-button @click="onReset">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  <template #default>重置</template>
                </a-button>
  
              </a-space>
            </a-col>
          </a-row>
  
        </a-form> -->
        <a-table row-key="key" size="small" :bordered="{
          cell: true
        }" :scroll="{ x: '100%', y: '100%', minWidth: 1200 }" :loading="loading" :columns="columns" :data="tableData"
          :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :pagination="pagination"
          @page-change="pageChange" @page-size-change="pageSizeChange">
          <template #recordDate="{ record }">
              {{formatDate(record.recordDate)}}
          </template>
          <template #completionTime="{ record }">
              {{formatDate(record.completionTime)}}
          </template>
          
  
          <template #optional>
            <a-space>
              <a-button size="mini" type="primary">详情</a-button>
              <a-button size="mini">修改</a-button>
              <a-popconfirm content="确定删除这条数据吗?" type="warning">
                <a-button size="mini" type="primary" status="danger">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { getfxVesselList } from "@/api/modules/fxVessel/index";
  import { getCommTownsAPI } from "@/api/modules/commTowns/index";
  import { List, FormData, RowSelection, Pagination } from "./config";
  const formData = reactive({
    form: {
      name: "",
      phone: "",
      email: "",
      address: "",
      status: null,
      vesselName:"",
      dischargePoint:"",
      projectName:""
    },
    search: false
  });
  const optionsList = ref([]) as any
  const selectedKeys = ref<string[]>([]);
  const rowSelection = reactive<RowSelection>({
    type: "checkbox",
    showCheckedAll: true,
    onlyCurrent: false
  });
  const pagination = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
  const pageChange = (page: number) => {
    pagination.value.current = page;
  };
  const pageSizeChange = (pageSize: number) => {
    pagination.value.pageSize = pageSize;
  };
  function formatDate(val: any) {
      const date = new Date(val);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 加1并补零
      const day = String(date.getDate()).padStart(2, '0'); // 补零
  
      return `${year}-${month}-${day}`;
  }
  const columns = [
  {
      title: "序号",
      width: 70,
      render: ({ rowIndex }: { rowIndex: number }) => {
        return rowIndex + 1
      }
    },
    {
      title: "场地调查",
      dataIndex: "fileName",
    
      width:120
    },
    {
      title: "地块编码",
      dataIndex: "time",
     
      width: 120
    },
    {
      title: "现任土地使用权人",
      dataIndex: "level",
      width: 120
    },
    {
      title: "统一社会信用代码",
      dataIndex: "classify",
      width:120
    },
    {
      title: "所居区县",
      dataIndex: "classify2",
      width:120
    },
    {
      title: "地块位置",
      dataIndex: "classify3",
      align: "center",
      width:120
    },
    {
      title: "地块类型",
      dataIndex: "classify4",
      width:120
    },
    {
      title: "行业门类",
      dataIndex: "classify5",
      width:130
    },
    {
      title: "地块占地面积(m)",
      dataIndex: "classify6",
      width:120
    },
    {
      title: "现状用地类型",
      dataIndex: "classify7",
      width:120
    },
    {
      title: "规划用地类型",
      dataIndex: "classify8",
      width:120
    },
 
    //accusedUnitAddress
    // {
    //   title: "操作",
    //   slotName: "optional",
    //   align: "center",
    //   fixed: "right",
    //   width: "200"
    // }
  ];
  const formRef = ref();
  const onReset = () => {
    formRef.value.resetFields();
    getCommonTableList();
  };
  const loading = ref<boolean>(false);
  const tableData = ref([
  {
          fileName: "秋柑路南侧02-16、02-17、02-18等3个土地储备项目地块",
          time: "3101513011047",
          level: "上海市土地储备中心长兴分中心",
          classify: "12310000558764552T",
          classify2: "崇明区",
          classify3: "崇明区长兴岛秋柑路",
          classify4: "其他",
          classify5: "农、林、牧、渔业",
          classify6: "130603.84",
          classify7: "农用地",
          classify8: "商业服务业设施用地(B)",
        },
        {
          fileName: "新建庙镇建筑垃圾分拣中转站工程项目地块",
          time: "3101512261000",
          level: "上海市崇明区市容环境卫生管理中心",
          classify: "123102304250178015",
          classify2: "崇明区",
          classify3: "崇明区北沿公路南侧，盘船洪东侧，地块东至崇明庙镇生活垃圾转运站，西至盘船洪，南至上海环岛混凝土制品有限公司，北至上海震亚织造有限公司",
          classify4: "关闭搬迁企业地块",
          classify5: "制造业",
          classify6: "13559.4",
          classify7: "建设用地类型",
          classify8: "公用设施用地(S)",
        },
        {
          fileName: "崇明区民华村村委地块",
          time: "3101513961001",
          level: "上海市崇明区庙镇民华村村民委员会",
          classify: "54310151ME0000992M",
          classify2: "崇明区",
          classify3: "东至现状沟渠，南至现状敬老院，西至现状农村道路，北至现状农田",
          classify4: "其他",
          classify5: "公共管理、社会保障和社会组织",
          classify6: "2003.72",
          classify7: "其他",
          classify8: "公共管理与公共服务用地(A)(A33,A5.A6除外)",
        },
  ]);
  const getCommonTableList = async () => {
    let obj = {
        "fxVesselDtoFilter": {
          "vesselName":formData.form.vesselName,
          "dischargePoint": formData.form.dischargePoint,
          "projectName": formData.form.projectName
        },
        "orderParam": null,
        "pageParam": {
          "pageNum": pagination.value.current,
          "pageSize": pagination.value.pageSize,
          "count": true
        }
      }

    try {
      loading.value = true;
    //   let res = await getfxVesselList(obj) as any;
      // Object.assign(data, res.data.list);
    //   tableData.value = res.data.dataList
    //   pagination.value.total = res.data.totalCount;
    } finally {
      loading.value = false;
    }
  };
  getCommonTableList();
  
  onMounted(() => {
    intiData()
  })
  async function intiData() {
    let res = await getCommTownsAPI() as any
    if (res.success) {
      optionsList.value = res.data
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .search-btn {
    margin-bottom: 20px;
  }
  </style>